<template>
  <div class="feed-column">
    <div class="go-front flex flex-end">
      <span>设定好的反馈类别将展示在“猜您想反馈”中</span>
      <a href="http://u.bendibao.com/fankui/index.html#/?action=houtai" target="_blank">查看</a>
    </div>

    <div class="table">
      <div class="table-title flex align-center">
        <img style="margin-right:9px;" src="../../assets/images/column-table.png" alt="">
        反馈类目
      </div>
      <el-table
        row-key="id"
        :data="tableData1"
        border
        header-row-class-name="t-head"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          prop="name"
          label="选择"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="排序"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="problem"
          label="一级问题（双击内容可修改）"
          align="center"
        >
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-form-item size="mini">
                <el-input
                  v-model="scope.row.problem"
                  @change="changeFirst(scope.row)"
                  maxlength="15"
                  style="width: 100%; hight: 100%; text-align: center"
                ></el-input>
                <!-- <span v-else>{{scope1.row.url}}</span> -->
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="reply_content"
          label="二级回复（双击内容可修改）"
          width="700"
          align="center"
        >
          <template slot-scope="scoped2">
            <el-form :model="scoped2.row">
              <el-form-item size="mini">
                <el-input
                  v-model="scoped2.row.reply_content"
                  @change="changeSecond(scoped2.row)"
                  style="width: 100%; hight: 100%; text-align: center"
                ></el-input>
                <!-- <span v-else>{{scope1.row.url}}</span> -->
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="openDialog(scope.row.id, 1)"
              style="color: #333"
              type="text"
              >【删除】</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="tools">
        <div class="flex flex-end">
          <button class="send-all" @click="sendAll">添加反馈类目</button>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      custom-class="dia-check add-column"
      :visible.sync="dialogFormVisible"
      width="644px"
    >
      <div slot="title" class="dialog-footer">
        <div class="dia-title flex align-center">
          <img src="../../assets/images/zhuanjie.png" alt="" />添加反馈类目
        </div>
      </div>
      <div class="dia-body">
        <!-- <div>
          <span class="db-title flex flex-end">排序:</span>
          <el-input
            class="common-inp"
            type="textarea"
            resize="none"
            placeholder="12"
            v-model="indexInput"
          ></el-input>
        </div> -->
        <div class="second" style="margin-bottom: 20px">
          <span class="db-title flex flex-end">一级回复:</span
          ><el-input
            type="textarea"
            resize="none"
            placeholder=""
            v-model="firstInput"
          ></el-input>
        </div>
        <div>
          <span class="db-title flex flex-end" style="color: #333333"
            >二级回复:</span
          >
          <el-input
            type="textarea"
            resize="none"
            placeholder=""
            v-model="secondInput"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer flex just-center">
        <el-button type="primary" @click="addColumn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import { get, post } from "../../axios/request";

export default {
  data() {
    return {
      firstInput: "",
      secondInput: "",
      dialogFormVisible: false,
      tableData1: [],
    };
  },
  created() {
    this.getColumn();
  },
  mounted() {
    this.rowDrop();
  },

  methods: {
    /**
     * 获取类目
     */
    getColumn() {
      get("index.php?ac=getFeedCate").then((res) => {
        if (res.data.code === 0) {
          this.tableData1 = res.data.data;
        }else if (res.data.code === -2) {
          window.location.replace("https://houtai.wh.bendibao.com/login.php");
        }
        
      });
    },

    /** 
    添加反馈类目
    */
    addColumn() {
      let data = {
        ac: "saveFeedCate",
        problem: this.firstInput,
        reply_content: this.secondInput,
      };
      post("index.php", data).then((res) => {
        if (res.data.code == 0) {
          this.firstInput = "";
          this.secondInput = "";
          this.getColumn()
          this.dialogFormVisible = false;
        }else if (res.data.code == -1) {
          this.$message.error(`添加失败，${res.data.msg}`);
        }
      });
    },

    changeFirst(val) {
      let data = {
        ac: "saveFeedCate",
        id: val.id,
        problem: val.problem,
        reply_content: val.reply_content,
        sort:val.sort
      }
      post("index.php", data).then((res) => {
        if (res.data.code == 0) {
          this.getColumn();
        }
      });
    },
    changeSecond(val) {
      let data = {
        ac: "saveFeedCate",
        id: val.id,
        problem: val.problem,
        reply_content: val.reply_content,
        sort:val.sort
      }
      post("index.php", data).then((res) => {
        if (res.data.code == 0) {
          this.getColumn();
        }
      });
    },

    sendAll() {
      this.dialogFormVisible = true;
    },
    openDialog(val) {
      let idAry = [];
      idAry.push(val)
      let data = {
        ac: "delFeedCate",
        ids: idAry,
      }
      post("index.php", data).then((res) => {
        if (res.data.code === 0) {
          this.getColumn();
        }
      });
    },

    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (oldIndex == newIndex) {
            return;
          }
          let id = [];
          let sort = [];

          const currRow = _this.tableData1.splice(oldIndex, 1)[0];
          _this.tableData1.splice(newIndex, 0, currRow);

          let idx = oldIndex;
          let maxIdx = newIndex;
          if (oldIndex > newIndex) {
            idx = newIndex;
            maxIdx = oldIndex;
          }
          for (let i = idx; i <= maxIdx; i++) {
            id.push(_this.tableData1[i].id * 1);
            sort.push(_this.tableData1[i].sort * 1);
          }
          sort.sort();
          let data = {
            ac: "updateSort",
            ids: id,
            sort: sort,
          };
          post("index.php", data).then((res) => {
            _this.getColumn();
          });
        },
      });
    },
  },
};
</script>

<style >
.feed-column {
  padding: 20px 56px 20px 20px !important;
}

.feed-column .el-input__inner {
  text-align: center;
  font-size: 14px;
  border: none;
}

.add-column .dia-body > div span {
  color: #333;
}
.add-column .dia-body .second .el-textarea__inner {
  height: 24px !important;
}

.t-head th {
  background-color: #e2e2e2 !important;
}

.go-front {
  width: 60%;
  margin: 15px auto 30px;
  padding: 18px 35px;
  border: 2px solid rgba(0.44, 0.44, 0.44, 0.1);
  background-color: #fffcfc;
  font-size: 18px;
}

.go-front span:first-of-type {
  margin-right: 20%;
  color: #333;
}
.go-front a {
  color: #00b2b5;
}
</style>